<template>
  <div class="tower-container">
    <div class="tower-info">
      <div class="tower-online">
        <dv-box title="电梯状态">
          <div class="online-info">
            <div class="item">
              <p>电梯数量</p>
              <h3>{{online.devicetot}}<span>台</span></h3>
            </div>
            <div class="item">
              <p>运行状态</p>
              <h3>{{online.current}}<span>在线</span></h3>
            </div>
            <div class="item">
              <p>运行有效时长</p>
              <h3>{{online.usetime}}<span>m</span></h3>
            </div>
            <div class="item">
              <p>平均使用率</p>
              <h3>{{online.userate}}<span>%</span></h3>
            </div>
          </div>
        </dv-box>
      </div>
      <div class="tower-real">
        <dv-box title="载重及人数分析">
          <div class="selectbox">
              <el-select size="mini" v-model="devicesn">
                  <el-option
                  v-for="item in realList"
                  :key="item.devicesn"
                  :label="item.snname"
                  :value="item.devicesn">
                  </el-option>
              </el-select>
          </div>
          <Echart style="height:100%" :options="optionT"/>
        </dv-box>
      </div>
    </div>

    <div class="tower-history">
      <dv-box title="运作历史数据">
        <dv-scroll-board :config="tableConfig" style="width:100%;height:100%" />
      </dv-box>
    </div>
  </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import moment from 'moment'
import { filtTimeList } from '@/utils/utils';
export default {
  props:{
    id:{
      type:Number|String,
      default:''
    }
  },
  components:{
    dvBox
  },
  data() {
    return {
      realList:[],
      devicesn:'',
      tableConfig:{},
      online:{
        devicetot:0,
        current:0,
        userate:0,
        usetime:0
      },
      optionT:{
        color:['#159AFF','#00FFFF'],
        legend: {
          icon:'rect',
          itemHeight: 10,
          itemWidth: 18,
          data: ['载重', '人数'],
          textStyle:{
            color:'#000'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: val=>{
            return `
              <div>${val[0].name}<div>
              <div>
                <i>${val[0].marker}</i>
                <span>${val[0].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[0].value} t</span>
              <div>
              <div>
                <i>${val[1].marker}</i>
                <span>${val[1].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[1].value} 人</span>
              <div>
            `
          }
        },
        grid: {
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: filtTimeList(14),
          axisLabel:{
            color:'#000',
          }
        },
        yAxis: {
            splitLine:false,
            type: 'value',
            axisLabel:{
              color:'#000',
            }
        },
        series: [
          {
              name: '载重',
              type: 'line',
              data: [],
              smooth: true
          },
          {
              name: '人数',
              type: 'line',
              data: [],
              smooth: true
          },
        ]
      }
    }
  },
  created() {
    this.$datav.getElevarotOnline({projectid:this.id}).then(res => {
      if(res.code == 0 && res.data){
        this.online.devicetot = res.data.devicetot
        this.online.current = res.data.current
        this.online.userate = (res.data.userate * 100).toFixed(2)
        this.online.usetime = res.data.usetime
      }
    })
    this.$datav.getElevarotReal({projectid:this.id,today:moment().format("YYYY-MM-DD")}).then(res => {
      if(res.code == 0 && res.data.length > 0){
        this.realList = res.data
        this.devicesn = res.data[0].devicesn
        this.getElevarotList()
      } 
    })
    
    this.$datav.getElevarotHistory({projectid:this.id}).then(res => {
      let arr = []
      res.data.content.map(item => {
          arr.push(
              [item.snname,item.runstarttime,item.runendtime,formatDuring(item.timeduration),Number(item.maxweight).toFixed(2),item.maxperson]
          )
      })
      this.tableConfig = {
          header: ['名称', '开始作业时间', '结束作业时间','有效作业时长', '载重(t)', '人数(人)'],
          index: true,
          rowNum:6,
          headerHeight:40,
          columnWidth:[140,300,300,300,300,300],
          headerBGC:'#F2F3F5',
          oddRowBGC:'rgba(0,0,0,0)',
          evenRowBGC:'rgba(0,0,0,0)',
          data:arr
      }
    })
  },
  methods: {
    getElevarotList(){
      this.$datav.getElevarotList({projectid:this.id,start:moment().subtract(14,'days').format("YYYY-MM-DD"),end:moment().format("YYYY-MM-DD"),type:'week',devicesn:this.devicesn}).then(res => {
        let arr1 = [],arr2 = []
        if(res.code == 0){
          for(let i=14;i>=0;i--){
            let obj = res.data.find(item => {
              return item.partitiondate == moment().subtract(i,'days').format("YYYY-MM-DD")
            })
            if(obj){
              arr1.push(obj.weight)
              arr2.push(obj.num)
            }else{
              arr1.push(0)
              arr2.push(0)
            }
          }
          this.optionT.series[0].data = arr1
          this.optionT.series[1].data = arr2
        }
        
      })
    }
  },
}
function formatDuring(value){
  let hours = parseInt(value % (60 * 60 * 24) / (60 * 60));
  let minutes = parseInt(value % (60 * 60) / ( 60));
  let seconds = value % (60);
  if (hours < 10) {
    hours = '0' + hours
  }
  if (minutes < 10) {
    minutes = '0' + minutes
  }
  if (seconds < 10) {
    seconds = '0' + seconds
  }
  return hours + ":" + minutes + ":" + seconds;
}
</script>

<style lang="scss" scoped>
.tower-container{
  margin-top: 24px;
  width: 100%;
  height: calc(100% - 60px);
  min-height: 676px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 24px;

  .tower-info{
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .tower-online{
      width: 570px;

      .online-info{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 100%;

        .item{
          width: 260px;
          height: 40%;
          background: url("../../../../assets/images/ov-energy.png") 0 0 no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          p{
            margin: 0 0 10px;
            font-size: 16px;
            color: #000000 !important;
          }
          h3{
            font-size: 36px;
            color: rgb(255, 87, 2) !important;
            text-shadow: 0px 0px 8px rgba(255,119,52,0.5000);
            margin: 0;
            span{
              font-size: 16px;
              margin-left: 4px;
            }
          }
          &:nth-child(3),&:nth-child(4){
            margin-bottom: 20px;
          }
        }
      }
    }
    .tower-real{
      flex: 1;
      margin-left: 30px;
    }
  }
  .tower-history{
    overflow: hidden;
  }
  .selectbox{
      position: absolute;
      top: 6px;
      right: 20px;
      text-align: right;
  }
}
::v-deep .el-select{
    .el-input__inner{
        background-color:#63cff649;
        border: 1px solid #63CEF6;
        color: #fff;
    }
}
@include dvScroll
</style>